//订单管理 - 待放款订单   催收管理 - 逾期订单、催收订单的  table

import React, { Component } from 'react';
import { Icon, Table, Tag, Drawer } from 'antd';
import EyeCard from './EyeCard';
import RemoveMoney from './RemoveMoney';
import Supplement from './Supplement';
import Record from './Record';

const { Column } = Table;

const data = [];
for (let i = 0; i < 50; i++) {
  data.push({
		key: i,
    name: '赵一鸣',
    phone: 18752066204,
    loanCount: 0,
    loanState:['放款中'],
    loanMoney:1500,
    serveMoney:500,
    loanInterest:5,
    loanDate:'2018-12-12',
    repaymentDate:'2018-12-18',
    partRepay:'-',
    ActualRepaymentDate:'-',
    RepaymentCount:'-',
    OverdueDays:'-',
    CollectionStatus:['已催收'],
    Collectter:'-',
    CollectionRepayment:'-',
    auditor:'于宇',
    MOcommissioner:'-',
    cz:['资料'],
  });
} 

class TableInfo extends Component {
  state = {
    pagination: {
      total: this.props.data.length,
      className: 'pagination-position',
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: (total) => {
        return `共 ${total} 条`;
      }
    },
    selectedRowKeys: [],
    visible: false,
    childrenDrawer: false,
    supplementDrawer: false,
    recordDrawer: false
  };

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  showChildrenDrawer = () => {
    this.setState({
      childrenDrawer: true,
    });
  };

  showSupplementDrawer = () => {
    this.setState({
      supplementDrawer: true,
    });
  };

  showRecordDrawer = () => {
    this.setState({
      recordDrawer: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
      childrenDrawer: false,
      supplementDrawer: false,
      postponeDrawer: false,
      recordDrawer: false
    });
  };

  onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  }

  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }

	render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };
		return (
      <div className="info-table">
        <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ this.state.pagination } rowSelection={rowSelection} bordered dataSource={this.props.data}>
          <Column title='姓名' align='center' dataIndex='name' width='60px' />
          <Column title='手机号' align='center' dataIndex='phone' width='100px' />
          <Column title='借款次数' align='center' dataIndex='loanCount' width='60' />
          <Column title='借款状态' align='center' dataIndex='loanState' width='50' 
            render={loanState => (
              <span>
                {loanState.map(loanState => <Tag color="orange" key={loanState}>{loanState}</Tag>)}
              </span>
            )} />
          <Column title='借款金额' align='center' dataIndex='loanMoney' width='60' />
          <Column title='服务费' align='center' dataIndex='serveMoney' width='50' />
          <Column title='借款利息' align='center' dataIndex='loanInterest' width='50px' />
          <Column title='借款日期' align='center' dataIndex='loanDate' width='75' />
          <Column title='还款日期' align='center' dataIndex='repaymentDate' width='75' />
          <Column title='部分还款' align='center' dataIndex='partRepay' width='60' />
          <Column title='实际还款日' align='center' dataIndex='ActualRepaymentDate' width='70' />
          <Column title='还款金额' align='center' dataIndex='RepaymentCount' width='60' />
          <Column title='逾期天数' align='center' dataIndex='OverdueDays' width='50' />
          <Column title='催收状态' align='center' dataIndex='CollectionStatus' width='50' 
            render={CollectionStatus => (
              <span>
                {CollectionStatus.map(CollectionStatus => <Tag color="orange" key={CollectionStatus}>{CollectionStatus}</Tag>)}
              </span>
            )} />
          <Column title='催收人' align='center' dataIndex='Collectter' width='50' />
          <Column title='催收还款' align='center' dataIndex='CollectionRepayment' width='50' />
          <Column title='审核专员' align='center' dataIndex='auditor' width='50' />
          <Column title='MO专员' align='center' dataIndex='MOcommissioner' width='50' />
          <Column title='操作' align='center' dataIndex='cz' width='245px' 
            render={cz => (
              <span>
                  <Tag color="blue" key={cz} onClick={this.showDrawer}><Icon type='eye' /></Tag>
                  <Tag color="orange" key="xz" onClick={this.showChildrenDrawer}>销账</Tag>
                  <Tag color="orange" key="bk" onClick={this.showSupplementDrawer}>补扣</Tag>
                  <Tag color="blue" key="jl" onClick={this.showRecordDrawer}>记录</Tag>
                  <Tag color="green" key="zl">资料</Tag>
              </span>
            )} />
        </Table>
        <Drawer
          title="订单详情"
          placement="right"
          width="75%"
          onClose={this.onClose}
          visible={this.state.visible}
          >
            <EyeCard />
          </Drawer> 
          <Drawer
            title="销账"
            placement="right"
            width="30%"
            onClose={this.onClose}
            visible={this.state.childrenDrawer}
          >
            <RemoveMoney />
          </Drawer>
          <Drawer
            title="补扣"
            placement="right"
            width="30%"
            onClose={this.onClose}
            visible={this.state.supplementDrawer}
          >
            <Supplement />
          </Drawer>
          <Drawer
            title="记录"
            placement="right"
            width="50%"
            onClose={this.onClose}
            visible={this.state.recordDrawer}
          >
            <Record />
          </Drawer> 
      </div>
		);
	}
}
    
export default TableInfo;